﻿define([
    'Wjs/widgets/MultipleContainer',
    'Wjs/widgets/menu/MenuItem',
    'Wjs/layout/Popup'
],
function (MultipleContainer) {
    'use strict';

    var MenuItem
    Menu = Wjs.defineOnce({

        type: 'Menu',

        internal: {

            base: MultipleContainer,

            construct: function (conf, parent) {

                conf = conf || {};

                var me = this,
                item;

                Menu.base.constructor.call(me, conf, parent, owner);

                me.main.setAttributes({
                    'class': 'w-menu',
                    style: {
                        display: 'none' // Initially hidden
                    }
                });
            },

            onBeforeTypeDefined: function () {

                // Menu item
                MenuItem = Wjs.define({

                    type: 'MenuItem',

                    base: View,

                    construct: function (conf, parent, owner) {

                        conf = conf || {};

                        var me = this;

                        MenuItem.base.constructor.call(me, conf, parent, owner);

                        me.handler = conf.handler;

                        me.addClass('w-menu-item');
                        me.main.events.click = Wjs.chain.override(me.main.events.click, function (evt) {

                            if (me.handler) {
                                me.handler.call(me);
                            }

                            if (parent) {
                                parent.widget.hideParents();
                                parent.hide();
                            }

                        }, me);

                        me.main.createHandler = Wjs.chain(me.main.createHandler, function () {

                            if (me.menu) {
                                me.menu.render();
                            }

                        }, me);

                        me.content.addClass('w-inline-block');

                        if (conf.menu) { // This menu item contains a sub-menu
                            me.menu = typeManager.create(conf.menu, 'menu');
                        }

                    },

                    onHighlight: function () {

                        var menu = this.menu,
                        main = this.main,
                        rect;

                        if (menu) {
                            rect = main.getPosition();
                            menu.move(rect.right, rect.top);
                            //viewport.adjust(menu.id); // Make sure it is completely visible inside the viewport
                            menu.show();
                        }
                    },

                    onUnhighlight: function () {

                        var me = this,
                        menu = this.menu;

                        if (menu) {

                            Wjs.time.delay(function () {
                                if (!menu.isHighlighted()) {
                                    menu.hideParents();
                                    menu.hide();
                                }
                            }, 100);
                        }
                        else { // Check if the parent menu is highlighted
                            Wjs.time.delay(function () {
                                if (me.parent && !me.parent.isHighlighted()) {
                                    me.parent.hide();
                                }
                            }, 100);

                        }
                    },

                    // Whether this item is highlighted or its menu is highlighted
                    isHighlighted: function () {
                        return this.highlighted ||
                            (this.menu && this.menu.isHighlighted());
                    }
                });
            }
        },

        childType: 'menuItem',

        layout: {
            type: 'popup',
            show: 'top right'
        },

        // The menu is considered highlighted if any item is highlighted or the menu of the item is highlighted
        isHighlighted: function () {

            var i = 0,
            items = this.children,
            item;

            if (items) {
                for (i = 0; i < items.length; ++i) {
                    item = items[i];

                    if (item.isHighlighted()) {
                        return true;
                    }
                }
            }

            return false;
        },

        hideParents: function () {
            var parent = this.parent;

            while (parent) {
                parent.hide();
                parent = parent.parent;
            }
        }

    });

    return Menu;
});